<template>
    <RowPageList :volume="5" :step="1" :total="lordCardList.length" last-page-turn-button-action="toFirst"
        first-page-turn-button-action="toLast" turn-page-button-visiblity="hovering-show" class="list">
        <template v-for="(lordCardObject, index) in lordCardList" #[index]>
            <LordCard height="auto" width="auto" :name="lordCardObject.name" :country="lordCardObject.country"
                :intro="lordCardObject.intro" :tokens="lordCardObject.tokens" :states="lordCardObject.states">
            </LordCard>
        </template>
    </RowPageList>
</template>

<script lang="ts" setup name="LordCardControl">
import LordCard from '@/components/game/card/lord-card.vue';
import { lordCardList } from '@/game/card-list';
import RowPageList from '../ui/row-page-list.vue';
</script>

<style scoped>
.list {
    width: 100%;
    height: 30vh;
}
</style>